<template>
  <el-dialog
    :model-value="true"
    title="班级增加"
    width="80%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="myForm" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :md="12" :sm="24">
          <el-form-item label="班级名称" prop="name">
            <el-input v-model="formData.name" maxlength="32" />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="班级方向" prop="classify">
            <el-input
              v-model="formData.classify"
              maxlength="32"
              placeholder="填写java、vue、python等"
            />
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="入班方式" prop="entry">
            <entry-select
              v-model="formData.entry"
              :empty="false"
            ></entry-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="年级" prop="grade">
            <el-date-picker
              v-model="formData.grade"
              type="year"
              format="YYYY"
              value-format="YYYY"
              placeholder="选择年份"
            />
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="封面图" prop="cover">
            <image-upload v-model="formData.cover" />
          </el-form-item>
        </el-col>
        <el-col :md="24">
          <el-form-item label="班级描述" prop="description">
            <el-input
              type="textarea"
              v-model="formData.description"
              maxlength="256"
              :rows="5"
              resize="none"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="warning" @click="handleClose">{{
          updateData.length == 0 ? "取消" : "关闭"
        }}</el-button>
        <el-button @click="handleClear(myForm)">清空</el-button>
        <el-button
          type="primary"
          @click.prevent="handleInsert(myForm)"
          native-type="submit"
          >增加</el-button
        >
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits } from "vue";
import ImageUpload from "@/components/public/ImageUpload.vue";
import EntrySelect from "./EntrySelect.vue";
import { FormRules, FormInstance } from "element-plus";
import request from "@/utils/request";

// 记录增加的数据
const updateData = reactive<any[]>([]);

// 定义事件触发器
const emits = defineEmits(["close"]);

// 接收表单参数
const formData = reactive({
  name: "",
  description: "",
  cover: "",
  classify: "",
  entry: 1,
  grade: 2024,
});

const myForm = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入标题", trigger: "blur" }],
  classify: [{ required: true, message: "请输入班级方向", trigger: "blur" }],
  grade: [{ required: true, message: "请输入年级", trigger: "blur" }],
});

const handleClose = () => {
  emits("close", updateData);
  updateData.length = 0;
};

const handleClear = (myForm: FormInstance) => {
  if (!myForm) {
    return;
  }
  myForm.resetFields();
};

const handleInsert = (myForm: FormInstance) => {
  myForm.validate((valid) => {
    // 校验失败
    if (!valid) {
      return;
    }

    // 发起请求
    request({
      data: formData,
      method: "POST",
      url: "/class/insert",
    }).then((res) => {
      if (res.data.code > 0) {
        alert("增加成功");
        updateData.push({ ...formData });
        myForm.resetFields();
      } else {
        alert("增加失败");
      }
    });
  });
};
</script>

<style scoped lang="scss">
:deep(.w-e-text-container video) {
  width: 100%;
}
</style>